package com.pj.compose.ui.page.widget

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Divider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.google.accompanist.flowlayout.FlowColumn
import com.google.accompanist.flowlayout.FlowRow
import com.pj.compose.common.config.StringExt.logd
import com.pj.compose.ui.compose.AppTopBarColumn
import com.pj.compose.ui.theme.cEAEDEE


@Composable
fun FlowLayoutPage(navHostController: NavController) {
//    val screenHeight = LocalConfiguration.current.screenHeightDp
    AppTopBarColumn(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize()
            .background(cEAEDEE),
        title = "FlowLayout", backClick = { navHostController.popBackStack() }) {
        Column(
            modifier = Modifier
                .padding(15.dp)
                .fillMaxWidth()
                .weight(1f)
                .padding(10.dp)
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Vertical", modifier = Modifier.padding(15.dp))
            FlowRow {
                for (i in 1..23) {
                    FlowItem(i)
                }
            }
        }
        Divider()
        Text(text = "Horizontal", modifier = Modifier.padding(15.dp))
        Row(
            modifier = Modifier
                .padding(15.dp)
                .fillMaxWidth()
                .weight(1f)
                .padding(10.dp)
                .horizontalScroll(rememberScrollState())
        ) {
            FlowColumn {
                for (i in 1..23) {
                    FlowItem(i)
                }
            }
        }
    }

}

@Composable
private fun FlowItem(position: Int = 0) {
    val text = "1805年拿破仑率兵征服欧洲"
    val start = (Math.random() * text.length / 2).toInt()
    val end = (Math.random() * text.length).toInt().let {
        if (it <= start) {
            start + 3
        } else {
            it
        }
    }
    "start = $start , end = $end".logd()
    val colorList = MaterialTheme.colorScheme.run {
        listOf(primary, secondary)
    }
    val buttonColors = ButtonDefaults.buttonColors(
        containerColor = Color.White,
        contentColor = Color.White
    )

    val color = colorList[position % colorList.size]
    val buttonBorder = BorderStroke(width = 1.dp, color = color)
    Button(
        onClick = {},
        modifier = Modifier
            .padding(top = 10.dp)
            .height(40.dp)
            .padding(end = 10.dp),
        shape = RoundedCornerShape(20.dp),
        border = buttonBorder,
        colors = buttonColors
    ) {
        Text(text = text.substring(start, end), color = color)
    }
}

@Preview(showBackground = true)
@Composable
private fun FlowLayoutPagePrev() {
    FlowLayoutPage(navHostController = rememberNavController())
}